<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>会员列表-WeAdmin Frame型后台管理系统-WeAdmin 1.0</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="../../static/css/font.css">
		<link rel="stylesheet" href="../../static/css/weadmin.css">
		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
	      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
	      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
	    <![endif]-->
	</head>

	<body>
		<div class="weadmin-nav">
			<span class="layui-breadcrumb">
				<a href="">首页</a>
				<a href="">报警管理</a>
				<a><cite>报警统计</cite></a>
      		</span>
			<a class="layui-btn layui-btn-sm" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
				<i class="layui-icon" style="line-height:30px">&#x1002;</i></a>
		</div>
		<div class="weadmin-body">
			<div class="layui-row">
				<form class="layui-form layui-col-md12 we-search">
					报警统计：
					<div class="layui-inline">
						<input type="text" lay-verify="required" name="serverdbm" placeholder="请输入服务器电报码" autocomplete="on" class="layui-input">
					</div>
					<button class="layui-btn" lay-submit lay-filter="search" ><i class="layui-icon">&#xe615;</i></button>
				</form>
			</div>
			<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
			<div id="main" style="width: 100%;height:550px;"></div>
		</div>		

		<script src="../../lib/echarts/echarts.js" charset="utf-8"></script>
		<script src="../../lib/layui/layui.js" charset="utf-8"></script>

		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var xData = new Array(), yData = new Array();
			// 指定图表的配置项和数据
			var option = {
				title: {
					text: '报警统计'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data:['报警统计']
				},
				calculable : true,
				xAxis: {
					type : 'category',
					data: xData
				},
				yAxis: {
					type : 'value'
				},
				series: [{
					name: '报警统计',
					type: 'bar',
					data: yData,
					markPoint : {
						data : [
							{type : 'max', name: '最大值'},
							{type : 'min', name: '最小值'},
						]
					},
					itemStyle:{
						normal:{color:'#4682B4'}
					}
				}],
				toolbox: {
					show : true,
					feature : {
						dataView : {show: true, readOnly: false},
						magicType : {show: true, type: ['line', 'bar']},
						restore : {show: true},
						saveAsImage : {show: true}
					}
				}
			};

			layui.use(['jquery', 'form'], function() {
				$ = layui.jquery,
				form = layui.form;

				form.on('submit(search)', function(data){
					$.get("WebAlarmStatistics.Lq", { Dbm : data.field.serverdbm }, function (d) {							
						xData.length = 0;
						yData.length = 0;
						var obj = JSON.parse(d);
						$.each(obj.data, function(){						
							xData.push(this.DBM);
							yData.push(this.Count);
						});

						myChart.setOption(option);
					});

					return false;
				});
			});
		</script>
	</body>

</html>